<script>
  import Vue from 'vue'

  const data = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer']
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
      tags: ['loser']
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher']
    }
  ]

  //  key: 'name',

  //  放在这里面才会进行编译jsx
  export default {
    name: 'AntTable',
    data() {
      // const nameRender = (text, row, index) => <div>{`${index} ${text} 🎄 `}</div>
      const columns = [
        {
          dataIndex: 'name',
          title: h('div','你的名字'), //  error not auto inject h , require jsx transfer plugin
          // scopedSlots: { customRender: 'name' }  //  如果要写在内部需要制定 scopedSlots 的 name 别名
          // customRender: this.nameRender
          // customRender: (props) => {
          // console.log(this);
          // console.log('>>>>>>>>>>>>>>>>>>>>>>>');

          //  必须要指向自己的this并且绑定
          // const h = this.$createElement
          // return {
          //   children: <div>aaa</div>,
          //   attrs: {}
          // }
          // }
        }
      ]

      return {
        columns,
        data,
        title: 'ccc'
      }
    },
    methods: {
      // nameRender: (text, row, index) => <div>{`${index} ${text} 🎄 `}</div>
    },
    render() {

      // <a slot="name" slot-scope="text">{{ text }}</a>
      // const options = {
      //   dataSource: data,
      //   columns,
      //   scopedSlots: {
      //     name: (props) => <div>ccc</div>
      //   }
      // }
      // scopedSlots
      //            scopedSlots={{name:props=><div>🎈</div>}}

      // return (<div>
      //   <a-table
      //     dataSource={this.data}
      //     columns={this.columns}
      //   />
      // </div>)

    }
  }
</script>

<style lang="scss" scoped>

</style>
